<template>
  <div class="cash-coupon common-page" style="margin-bottom:env(safe-area-inset-bottom);margin-bottom:constant(safe-area-inset-bottom">
    <span
      v-if="list.length"
      class="remark"
    >注：现金券余额可分多次兑换使用，未激活的现金券点击立即激活后开始生效</span>
     <van-list
     :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
      v-if='list.length'
      style="margin-bottom:50px;"
    >
      <div class="list">
        <cash-coupon-item
          :cashCouponInfo="item"
          v-for='(item,index) in list'
          :key="index"
          @onImmediatelyExchangeClick='onExchangeClick'
          @activateCashCoupun='activateCashCoupun'
        ></cash-coupon-item>
      </div>
    </van-list>
    <tabbar-custom active="1"></tabbar-custom>
    <empty-data
      description="空空如也~"
      :emptyImg="emptyImg"
      v-if='!list.length'
    ></empty-data>
    <exchange-action-sheet
      ref="actionSheet"
      title="选择兑换账户"
      cancelText="取消"
      :exchangeInfo="currCashInfo"
      @selectUser="selectUser"
    >
    </exchange-action-sheet>
  </div>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";
import { List } from "vant";
import CashCouponItem from "@/components/CashCouponItem";
import EmptyData from "@/components/EmptyData";
import ExchangeActionSheet from "@/components/ExchangeActionSheet";
import TabbarCustom from "@/components/TabbarCustom";
import apiCash from "@/common/api/apiCash";
import Exchange from "./mixin/exchange";
import Share from "./mixin/share";

export default {
  name: "BlindBoxDetail",
  components: {
    [List.name]: List,
    [CashCouponItem.name]: CashCouponItem,
    [EmptyData.name]: EmptyData,
    [ExchangeActionSheet.name]: ExchangeActionSheet,
    [TabbarCustom.name]: TabbarCustom,
  },
  mixins: [Exchange, Share],
  data() {
    return {
      emptyImg:
        "http://alivod.sdxgxx.cn/image/default/805FA0987DC9499D957BB7FF046D958C-6-2.png",
      list: [],
      loading: false,
      finished: false,
      count: 10,
      pageNum: 1,
      currCashInfo: {},
      token: "",
      userList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    store.dispatch("user/setToken", "");
    store.dispatch("user/setUserList", {});
    this.getList();
    this.setShare();
  },
  mounted() {},
  methods: {
    // 点击立即兑换
    onExchangeClick(info) {
      this.currCashInfo = info;
      this.$set(this.currCashInfo, "cashCouponId", info.id);
      this.$refs.actionSheet.showSheet();
    },
    // 激活现金券
    activateCashCoupun(info) {
      this.$toast.loading();
      apiCash
        .cashCoupunActivate({
          userId: this.userInfo.userId,
          couponId: info.id,
        })
        .then((data) => {
          this.$toast.clear();
          this.activateCashCoupunSuccess(data.data)
          this.$toast.success('激活成功')
        });
    },
    activateCashCoupunSuccess(info){
      this.currCashInfo = info;
      let infoIndex =this.list.findIndex((item) => {
          return item.id == info.id;
      });
      this.list[infoIndex] = info
    },
    // 获取现金券列表
    getList() {
      this.$toast.loading();
      apiCash
        .getCashList({
          userId: this.userInfo.userId,
          count: this.count,
          pageNum: this.pageNum,
        })
        .then((data) => {
          this.$toast.clear();
          this.loading = false;
          if (!data.data.length) {
            this.finished = true;
            return;
          }
          this.list = [...this.list, ...data.data];
          this.pageNum = this.pageNum+1;
          if (data.data.length < this.count) {
            this.finished = true;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.cash-coupon{
  min-height: 100vh;
  box-sizing: border-box;
}
.list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;

  .cash-coupon-item {
    margin-bottom: 24px;
  }
}

.remark {
  display: inline-block;
  margin: 24px;
  box-sizing: border-box;
  font-size: 26px;
  color: #df5438;
  line-height: 40px;
}
</style>